<template>
    <!-- 触发按钮 -->
    <el-button type="info"  @click="showFullscreenDialog">设计</el-button>
    <!-- 全屏弹窗 -->
    <teleport to="body">
      <transition name="dialog-fade">
        <div v-if="visible" class="fullscreen-dialog">
          <!-- 遮罩层 -->
          <div class="dialog-mask" @click.self="visible = false"></div>
          <!-- 内容区域 -->
          <div class="dialog-content">
            <!-- 段落容器 -->
            <div v-for="(paragraph, pIndex) in data" :key="pIndex" class="paragraph">
              <!-- 单字元素 -->
              <span 
                v-for="(word, wIndex) in paragraph" 
                :key="wIndex"
                :class="{ bold: word.isBold === 1 }"
                @click="toggleBold(pIndex, wIndex)"
                class="word"
              >
                {{ word.word }}
              </span>
            </div>
          </div>
        </div>
      </transition>
    </teleport>
  </template>
  
  <script setup>
  import axios from 'axios';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'

let data = ref([])


const props = defineProps({
    articleId: {
        type: Number,
        required: true
    },
    articleName: {
        type: String,
        required: true
    },
})
 // 获取后端数据
 let updateDate = async () => {
  try {
    const response = await axios.get('http://localhost:8080/word/getwordlistById', {
      params: {
        articleId: props.articleId,
      }
    })
    if (response.data.success) {    
      data.value = response.data.data
    }else{
        visible.value = false
        ElMessage.error('获取数据失败');
    }
  } catch (error) {
    visible.value = false
    ElMessage.error('获取数据失败');
  }
}
 


  // 控制弹窗显示
  const visible = ref(false)
  
  // 显示弹窗方法
  const showFullscreenDialog = () => {
    visible.value = true
    updateDate()  
}

let CanUpdate=ref(true)
  
  // 切换加粗状态
  const toggleBold = (pIndex, wIndex) => {
    if(CanUpdate.value==false){
        alert('请等待上一个数据修改完毕');
         retuen 
    }
    CanUpdate.value=false
    console.log(pIndex,wIndex)
     const current = data.value[pIndex][wIndex]
     if (current.isBold ==null) {
       current.isBold = 0
     }
    updateBold(current)

  }

  const updateBold= async (current) => {
    try {
    const response = await axios.post('http://localhost:8080/word/updateBold  ', current)
    if (response.data.success) {    
        current.isBold = current.isBold === 1 ? 0 : 1
        alert('字体高亮成功');
        CanUpdate.value=true

    }else{
        alert('修改数据失败');
        CanUpdate.value=true

    }
  } catch (error) {
    alert('修改数据失败');
    CanUpdate.value=true

}
  }
 
 










  </script>
  
  <style scoped>
  /* 全屏弹窗样式 */
  .fullscreen-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
  }
  
  .dialog-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  
  .dialog-content {
    position: relative;
    max-width: 80%;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    z-index: 10000;
  }
  
  .paragraph {
    margin: 1rem 0;
    line-height: 2.5;
    font-size: 1.2rem;
  }
  
  .word {
    cursor: pointer;
    margin: 0 2px;
    padding: 2px 5px;
    transition: all 0.3s;
  }
  
  .word:hover {
    background: #f0f0f0;
  }
  
  .bold {
    font-weight: 900;
    color: #409eff;
  }
  
  /* 过渡动画 */
  .dialog-fade-enter-active,
  .dialog-fade-leave-active {
    transition: opacity 0.3s;
  }
  
  .dialog-fade-enter-from,
  .dialog-fade-leave-to {
    opacity: 0;
  }
  </style>